<template>
  <div>
    <CountdownMask ref="countdownMast" :onFinish="onCountFinish" />
    <div v-show="rainContainerShow" class="rain-container" ref="rainContainer"></div>
    <RecordMask ref="recordMask" :onClose="onRecordClose" />
  </div>
</template>

//
<script>
// import request from "@/utils/request";
import CountdownMask from "./components/CountdownMask";
import RecordMask from "./components/RecordMask.vue";
import RedPacket from "./class/RedPacket.js";
export default {
  name: "RedPackageApp",
  components: {
    CountdownMask,
    RecordMask,
  },

  data() {
    return {
      rainContainerShow: false,
      timer: null,
    };
  },

  mounted() {
    this.$refs.countdownMast.show();
  },

  methods: {
    onCountFinish() {
      console.log("倒计时结束");
      this.createRain(5000, 200);
    },
    onRecordClose() {
      console.log("点了关闭");
    },
    onRainEnd() {
      console.log("下完雨了");
      this.$refs.recordMask.show(888);
    },
    onPacketClick() {
      console.log(" PacketClick  ");
    },
    createRain(duration, speed) {
      console.log("开始下红包雨");
      this.rainContainerShow = true;
      this.timer = setInterval(() => {
        new RedPacket({
          parent: this.$refs.rainContainer,
          callback: this.onPacketClick,
        });
      }, speed);
      setTimeout(() => {
        clearInterval(this.timer);
        this.onRainEnd();
      }, duration);
    },
  },
};
</script>

<style lang="scss" scoped>
.rain-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(180deg, orange, red);
  overflow: hidden;
}
</style>
